<template>
  <BasicModal
    :minHeight="500"
    v-bind="$attrs"
    @register="register"
    destroyOnClose
    title="接单数据"
    width="1000px"
  >
    <table class="table">
      <thead>
        <tr>
          <th>通道类型</th>
          <th>今日成功金额</th>
          <th>今日成功笔数</th>
          <th>今日失败金额</th>
          <th>今日失败笔数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.today.length === 0">
          <td colspan="5">暂无数据</td>
        </tr>
        <tr v-for="(item, index) in tableData.today" :key="index">
          <td>{{ item?.type }}</td>
          <td style="color: #f50">{{ item?.success || 0 }}</td>
          <td style="color: #f50">{{ item?.receive || 0 }}</td>
          <td>{{ item?.fail || 0 }}</td>
          <td>{{ item?.failNum || 0 }}</td>
        </tr>
      </tbody>
    </table>
    <table class="table">
      <thead>
        <tr>
          <th>通道类型</th>
          <th>昨日成功金额</th>
          <th>昨日成功笔数</th>
          <th>昨日失败金额</th>
          <th>昨日失败笔数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.yesterday.length === 0">
          <td colspan="5">暂无数据</td>
        </tr>
        <tr v-for="(item, index) in tableData.yesterday" :key="index">
          <td>{{ item?.type }}</td>
          <td style="color: #f50">{{ item?.success || 0 }}</td>
          <td style="color: #f50">{{ item?.receive || 0 }}</td>
          <td>{{ item?.fail || 0 }}</td>
          <td>{{ item?.failNum || 0 }}</td>
        </tr>
      </tbody>
    </table>
    <table class="table">
      <thead>
        <tr>
          <th>通道类型</th>
          <th>全部成功金额</th>
          <th>全部成功笔数</th>
          <th>全部失败金额</th>
          <th>全部失败笔数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="tableData.all.length === 0">
          <td colspan="5">暂无数据</td>
        </tr>
        <tr v-for="(item, index) in tableData.all" :key="index">
          <td>{{ item?.type }}</td>
          <td style="color: #f50">{{ item?.success || 0 }}</td>
          <td style="color: #f50">{{ item?.receive || 0 }}</td>
          <td>{{ item?.fail || 0 }}</td>
          <td>{{ item?.failNum || 0 }}</td>
        </tr>
      </tbody>
    </table>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { GetGroupGrabOrderApi } from '@/api/group';

  const id = ref(0);
  const tableData = ref({
    today: [],
    yesterday: [],
    all: [],
  });

  const loadData = async () => {
    const res = await GetGroupGrabOrderApi({ id: id.value });
    if (res) {
      tableData.value = res;
    }
  };

  const [register] = useModalInner((data) => {
    id.value = data.id;
    loadData();
  });
</script>
<style lang="less" scoped>
  .table {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid rgb(240 240 240);

    th,
    td {
      padding: 10px;
      border: 1px solid rgb(240 240 240);
      text-align: center;
    }

    th {
      background-color: rgb(250 250 250);
    }
  }
</style>
